<script setup lang="ts" name="BalanceBanner">
import userinfo from "@/store/userinfo";
const { t } = useI18n();
const piniaUserinfo: any = userinfo();
</script>

<template>
  <div class="banner">
    <h4>{{ t("withdraw.test1") }}</h4>
    <p>
      ₹ <span>{{ piniaUserinfo.getUserMoney }}</span>
    </p>
  </div>
</template>

<style lang="scss" scoped>
.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 30rem;
  background-image: url("@/assets/images/Me/balanceBg.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16rem;
  margin: 0 16rem;
  height: 102rem;
  h4 {
    color: #fff;
    font-size: 14rem;
    font-weight: 500;
  }
  p {
    margin-top: 12rem;
    color: #fff;
    font-size: 20rem;
    font-weight: 700;
    span {
      margin-left: 8rem;
      font-size: 28rem;
    }
  }
}
</style>
